import { createRoot } from 'react-dom/client'

// a
// 1 + 1
// a ? b : c
// fn()
// []
// {}
// while no
// if    no
// for   no

const username = 'ifer'
const info = {
  name: 'elser',
  age: 18,
}
const arr = ['a', 'b']

const fn = () => {
  return 'Hello React'
}

const jsx = <h3>你好</h3>

const con = (
  <>
    {/* 普通数据类型 */}
    <p>username: {username}</p>
    {/* 对象中的属性 */}
    <p>age: {info.age}</p>
    {/* 对象虽然也是表达式，但是不能直接在 {} 中使用 */}
    {/* <p>info: {info}</p> */}
    {/* 数组中的某一项 */}
    <p>{arr[0]}</p>
    {/* 整个数组 */}
    <p>{arr}</p>
    {/* 函数调用 */}
    <p>{fn()}</p>
    {/* JSX 本身 */}
    <div>{jsx}</div>
  </>
)

// createRoot(渲染到哪儿).render(渲染谁)
createRoot(document.querySelector('#root')).render(con)
